<template>
  <div class="home">
    <h1>echarts</h1>
    <div id="main"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      type: "bar",
      options: {},
      grade: [
        {
          name: "zs",
          score: 50
        },
        {
          name: "lisi",
          score: 60
        },
        {
          name: "ww",
          score: 70
        },
        {
          name: "zz",
          score: 80
        },
        {
          name: "qq",
          score: 90
        }
      ]
    };
  },
  mounted() {
    let arr = [],
      brr = [];
    this.grade.forEach((item, index) => {
      arr.push(item.name);
      brr.push(item.score);
    });
    this.type = "bar";
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts入门示例",
        link: "http://localhost:8080",
        target: "blank",
        textStyle: {
          fontStyle: "oblique"
        }
      },
      tooltip: {},
      xAxis: {
        data: arr
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: this.type,
          data: brr
        }
      ]
    });
  },
  components: {}
};
</script>
<style lang="scss">
#main {
  width: calc(100vw - 200px);
  height: calc(100vh - 200px);
  border: 1px solid black;
  margin: 0 auto;
}
</style>
